<template>
  <div class="app-container" v-if="initData">
      <h1 class="head_title">用户属性</h1>

    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>性别比例</span>
    </div>
    <div class="text item sex_ratio">
        <div>
            <p class="sex_progress male" :style="{width:(initData.man)*10 + 'px'}"></p>
            <p>男({{initData.man}}%)</p>
            <img class="sex_pic" src="../../icons/man.png" />
        </div>
        <div>
            <p class="sex_progress female" :style="{width:(initData.woman)*10 + 'px'}"></p>
            <p>女({{initData.woman}}%)</p>
            <img class="sex_pic" src="../../icons/woman.png" />
        </div>
        <div>
            <p class="sex_progress no_sex" :style="{width:(initData.unknow)*10 + 'px'}"></p>
            <p>未知({{initData.unknow}}%)</p>
             <img class="sex_pic" src="../../icons/alien.png" />
        </div>
    </div>
    </el-card>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>年龄分布</span>
    </div>
    <div class="text item age_spread" v-if="initData.agelist.length > 0">
        <div v-for="(item,index) in initData.agelist" :key="index">
            <span class="progress_title ">{{item.range}}</span><el-progress class="progress_btn"  :show-text="true" :percentage="Number(item.percent)" ></el-progress>
        </div>
    </div>
    </el-card>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="活动区域">
        <el-select v-model="searchForm.timespan" placeholder="选择时间">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="search_btn">确定</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>兴趣分布</span>
    </div>
    <div class="text item interest_spread">
        <div id="echartContainer" style="width:1000px; height:620px;margin:0 auto;font-size:14px;"></div>
    </div>
    </el-card>
  </div>
</template>

<script>
var echarts = require('echarts')
import {getUserPropertyAPI} from '@/api/dataCenter'
export default {
  name: '',
  data() {
    return {
        initData:null,
        searchForm:{
          timespan:'3'
        },
        options:[{
                value:'3',
                label:'最近一个月'
            },{
                value:'4',
                label:'最近三个月'
            },{
                value:'5',
                label:'最近六个月'
            },{
                value:'6',
                label:'最近十二个月'
            }
        ],
        plantCap : [],
    };
  },
  methods:{
     async getUserProperty(){
          let params = {
              timespan:this.searchForm.timespan || ''
          }
        let res = await getUserPropertyAPI(params);
        if(res.code === 0){
            this.initData = res.data;
            this.plantCap = res.data.gamelist.map((item)=>{
                return{
                    name:item.game,
                    value:item.percent + '%'
                }
            })
        }else{
            this.$message.error(res.message)
        }

      },
      async onSubmit(){
          await this.getUserProperty();
      }
  },
 async mounted(){
       await this.getUserProperty();
      var myChart = echarts.init(document.getElementById('echartContainer'));
    //   var plantCap = [{
    //         name: '重大项目决策',
    //         value: '1'
    //     }, {
    //         name: '重要人事任免',
    //         value: '2'
    //     }, {
    //         name: '大额度资金运作',
    //         value: '3'
    //     }, {
    //         name: '重大事项安排',
    //         value: '4'
    //     }, {
    //         name: '十九大',
    //         value: '5'
    //     }, {
    //         name: '党建',
    //         value: '6'
    //     }, {
    //         name: '贯彻落实',
    //         value: '7'
    //     }, {
    //         name: '党廉',
    //         value: '8'
    //     }, {
    //         name: '贯彻落实',
    //         value: '9'
    //     }, {
    //         name: '党廉',
    //         value: '10'
    //     }];

    var datalist = [{
            offset: [56, 48],
            symbolSize: 120,
            opacity: .95,
            color: '#f467ce'
        }, {
            offset: [45, 70],
            symbolSize: 115,
            opacity: .88,
            color: '#7aabe2'
        }, {
            offset: [40, 33],
            symbolSize: 110,
            opacity: .84,
            color: '#ff7123'
        }, {
            offset: [83, 35],
            symbolSize: 105,
            opacity: .8,
            color: '#ffc400'
        }, {
            offset: [55, 25],
            symbolSize: 100,
            opacity: .75,
            color: 'rgba(104,184,55, 1)'
        }, {
            offset: [40, 52],
            symbolSize: 95,
            opacity: .7,
            color: '#6b3442'
        }, {
            offset: [71, 45],
            symbolSize: 100,
            opacity: .68,
            color: '#489EFF'
        }, {
            offset: [78, 62],
            symbolSize: 110,
            opacity: .6,
            color: '#409EFF'
        }, {
            offset: [70, 25],
            symbolSize: 115,
            opacity: .68,
            color: '#8a3647'
        }, {
            offset: [65, 72],
            symbolSize: 95,
            opacity: .6,
            color: 'rgba(104,184,55, 1)'
        }];
    var datas = [];
    for (var i = 0; i < this.plantCap.length; i++) {
        var item = this.plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
                normal: {
                    textStyle: {
                        fontSize: 14
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: itemToStyle.color,
                    opacity: itemToStyle.opacity
                }
            },
        })
    }
    var option = {
        grid: {
            show: false,
            top: 10,
            bottom: 10
        },
        xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
        }],
        yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
        }],
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#fff',
                    textStyle: {
                        fontSize: '20'
                    }
                },
            },
            itemStyle: {
                normal: {
                    color: '#00acea'
                }
            },
            data: datas
        }]
    };
     myChart.setOption(option);
  },
};
</script>

<style  scoped>
    .head_title{
        font-size: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    .search_btn{
        background-color: #33CCCC;
        border-color: #33CCCC;
    }
    .sex_ratio{
        display: flex;
        width: 1000px;
      margin-top:20px
    }
    .sex_ratio > div{
      position: relative;
    }
    .sex_pic{
      position: absolute;
      top: -30px;
      left: -15px;
      width: 40px;
      height: 40px;
    }
    .sex_progress{
        height: 20px;
        width: 1000px;
    }
    .male{
        width: 700px;
        background-color:#409eff;
    }
    .female{
        width: 200px;
        background-color: #ff572287;
    }
    .no_sex{
        width: 100px;
        background-color: #eee;
    }
    .age_spread{
        width: 1000px;
    }
    .age_spread > div{
        margin-bottom: 20px;
    }
    .age_spread > div::after{
        content: '';
        display: block;
        clear: both;
    }
    .progress_title{
        float: left;
        margin-right: 10px;
    }
    .progress_btn{
        float: left;
        width: 90%;
    }
    .box-card{
        margin-bottom: 20px;
    }
    .interest_spread{
        width: 1000px;
    }
   /deep/ .age_spread .el-progress-bar{
        width: 98%;
    }
</style>
